<template>
  <footer v-if="todos.length" class="todo-footer">
    <label class="cute-checkbox">
      <input type="checkbox" :checked="allDone" @change="toggleAllDone" />
      <span class="checkmark"></span>
    </label>
    <span class="stats">已办事项{{ doneCount }}/全部事项{{ allCount }}</span>
    <button class="cute-btn" @click="$emit('clear-done')">清除已办</button>
    <button class="cute-btn" @click="$emit('clear-all')">清除所有</button>
  </footer>
  <h2 v-else>暂无待办事项</h2>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  todos: {
    type: Array,
    required: true,
    default: () => [],
  },
})

const emit = defineEmits(['toggle-all', 'clear-done', 'clear-all'])

const doneCount = computed(() => {
  return props.todos.filter((todo) => todo.done).length
})
const allCount = computed(() => {
  return props.todos.length
})
const allDone = computed(() => {
  return props.todos.every((todo) => todo.done)
})

const toggleAllDone = (event) => {
  emit('toggle-all', event.target.checked)
}
</script>

<style scoped>
.todo-footer {
  margin-top: 20px;
  background: linear-gradient(120deg, #ff9a9e, #fad0c4, #fbc2eb);
  display: flex;
  align-items: center;
  padding: 15px 40px;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stats {
  flex: 1;
  margin-left: 20px;
  font-size: 16px;
  color: #7b3e9d;
  font-weight: bold;
}

/* 可爱风格的按钮 */
.cute-btn {
  margin-left: 10px;
  padding: 8px 15px;
  cursor: pointer;
  background-color: #9cec1b;
  color: #c06c84;
  border: 2px solid #ffb6c1;
  border-radius: 30px;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cute-btn:hover {
  background-color: #ffb6c1;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.cute-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

/* 可爱风格的复选框 */
.cute-checkbox {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.cute-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border: 2px solid #ffb6c1;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.cute-checkbox:hover input ~ .checkmark {
  background-color: #f8e1e5;
}

.cute-checkbox input:checked ~ .checkmark {
  background-color: #ffb6c1;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.cute-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.cute-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

h2 {
  margin-top: 30px;
  text-align: center;
  color: #df8e2a;
  font-size: 24px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
</style>
